.el-header {
  position: relative;
  background-color: #B3C0D1;
  border-radius: 10px;
  color: #333;
}

.el-aside {
  position: relative;
  background-color: #F0FFF0;
  border: 1px solid #00F5FF;
  border-radius: 10px;
  color: #333;
  /*height: 100%;*/
  max-height: 87.8vh; /* 侧边栏的最大高度为当前窗口高度的80%，可以根据需要调整 */
  overflow-y: auto; /* 当内容超出侧边栏高度时产生垂直滚动条 */
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  height: 100px;
}

.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
}

/*======组件样式======================================*/

/*点击菜单后放大*/
.menu-selected {
  font-size: 1.05em; /* 放大1.1倍 */
  transition: transform 0.3s ease; /* 添加过渡效果 */
}

.el-menu-item-group{
  overflow-x: hidden;
  overflow-y: hidden;
}

.el-menu-item-group__title{
  padding: 1px;
  background-color: #D3DCE6;
}

.el-submenu__title{
  background-color: #87CEFA;
}

.el-menu-item{
  background-color: #BBFFFF;
}

.menu-space{
  height: 1px;
  background-color: #B3C0D1;
}

.menu-space-title{
  height: 2px;
  background-color: #B3C0D1;
}

/*.el-menu-item{*/
/*  !* 设置背景图片 *!*/
/*  background-image: url('../../assets/img/menu.jpg');*/
/*  background-size: 100% 100%; !* 宽度100%，高度自动适应 *!*/
/*}*/

/*头部容器*/
#frame-header-container {
  position: absolute;
  left: 0px;
  height: 100%;
  width: 100%;
}

.frame-bg-container{
  z-index:1;
  position: absolute;
  width: 100%;
  height: 100%;
}

.frame-header-context-container{
  z-index:2;
  position: absolute;
  width: 100%;
  height: 100%;
}

/*背景*/
.frame-header-bg {
  position: absolute;
  width: 100%;
  height: 100%;
}

/*>>==左区域==================<<*/
/*设置左容器样式*/
#frame-left-container {
  position: absolute;
  width: calc(100% - 500px);;
  height: 100%;
}

/*设置图标格式*/
#frame-icon {
  position: relative;
  height: 75%;
  left: 40px;
  top: 50%;
  transform: translate(0, -50%); /*设置移动距离为自身的一半，保持居中*/
}

/*设置标题容器*/
#frame-title-container {
  position: absolute;
  display: inline;
  width: 700px;
  height: 100%;
}

/*设置标题样式*/
#frame-title {
  position: relative;
  padding: 0;
  left: 70px;
  top: 50%;
  transform: translate(0, -50%); /*设置移动距离为自身的一半，保持居中*/
  width: 500px;
  /*12个字符并不是说有十二个字，而是浏览器会包含一些字符在内，并且宽度大小也对结果又影响*/
  letter-spacing: calc((300px - 9ch) / 8);
  font-size: 35px;
  font-family: 华文楷体;
  font-weight: bold;
}

/*=============================*/

/*>>==右区域==================<<*/
/*设置右容器样式*/
#frame-right-container {
  position: relative;
  float: right;
  right: 25px;
  width: 350px;
  height: 100%;
}

/*提示语容器*/
#frame-header-tip-container {
  position: absolute;
  width: 300px;
  height: 100%;
}

/*设置按钮容器*/
#frame-set-container {
  position: relative;
  float: right;
  width: 40px;
  height: 100%;
}

/*设置图标样式*/
.el-icon-s-tools {
  position: relative;
  transform: scale(1.5);
  padding-top: 50px;
  margin-right: 8px;
}

/*=============================*/

/*>>==底部区域================<<*/
/*时钟容器*/
.frame-clock-container {
  position: relative;
  width: 250px;
  float: right;
  height: 100%;
}

.frame-clock {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
}

/*=============================*/

.tip-message {
  position: relative;
  width: 450px;
  height: 300px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
